<template>
	<div>
		<div class="inputDiv" v-for="(item,index) in list" :key="index">
				<Tag color="#FFA2D3">{{'SQL'+ index}}：</Tag>
				<Input v-model="item.content" type="textarea"  :autosize="true" style="width: 1100px" placeholder="Enter something..." />
				<Icon type="ios-add-circle" size="24" @click="addInput" style="margin-left: 10px;" />
				<Icon v-if="list.length>1" type="ios-close-circle" size="24" @click="delInput(item,index)" style="margin-left: 5px;" />
		</div>
		<div slot="footer" class="clearfix">
			<Button type="success" @click="saveTaskDetail" style="margin-top: 5px;margin-right: 10px; float: right;">保存</Button>
		</div>
		<Spin fix v-show="addLoading"></Spin>
	</div>
</template>

<script>
	
	export default {
		name: "MountComponent",
		props: {
			mid: String,
		},
		data() {
			return {
				list: [],
				addLoading: false,
			}
		},
		mounted() {
			this.getTaskDetail();
		},
		methods: {
			//增加输入框done
			addInput() {
				const obj = {
					mid: this.mid,
					orders: this.list.length,
					content: ""
				}
				this.list.push(obj);
			},
			//删除输入框done
			delInput(obj, index) {
				if (this.list.length > 1) {
					this.$Modal.confirm({
						title: "确认删除",
						render: h => {
							return h("span", [
								h("span", "您确认要删除"),
								h(
									"span", {
										style: {
											color: "red",
											fontWeight: 600,
											userSelect: "none"
										}
									},
									`SQL${index}`
								),
								h("span", "脚本吗？")
							])
						},
						onOk: async () => {
							this.delTaskDetail(obj)
						}
					});
				}
			},
			//保存或更新脚本
			async saveTaskDetail() {
				this.addLoading = true;
				if (this.list[0].content === "") {
					this.$Message.error("脚本不能为空");
					this.addLoading = false;
					return;
				}
				this.list = this.list.filter(item => {
					return item.content
				})
				const res = await this.$api.saveTaskDetail(this.list);
				if (res.code === 1) {
					this.$Message.success("保存成功!");
				} else {
					this.$Message.error(res.errMsg);
				}
				this.addLoading = false;
				this.$emit("func");
			},
			//获取批次下的脚本done
			async getTaskDetail() {
				this.addLoading = true;
				const res = await this.$api.getTaskDetail({
					mid: this.mid
				});
				if (res.code === 1) {
					if (res.data && res.data.length > 0) {
						this.list = res.data;
					} else {
						this.addInput();
					}
				}
				this.addLoading = false;
			},
			//根据脚本id删除脚本done
			async delTaskDetail(obj) {
				this.addLoading = true;
				if (obj.did) { //mid存在则后台删除
					const res = await this.$api.delTaskDetail({
						did: obj.did
					});
					if (res.code === 1) {
						this.$Message.success("删除成功!");
					} else {
						this.$Message.error(res.errMsg);
					}
				}
				//前端删掉
				this.list = this.list.filter(item => {
					return item != obj
				})
				this.addLoading = false;
			}
		}
	}
</script>

<style scoped="Mounted">
	.inputDiv{
		margin: 10px 0;
	}
</style>
